<html lang="zh">
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
            text-decoration: none;
            list-style-type: none;
        }
        body{
            max-width: 640px;
            min-width: 320px;
            border: red solid 1px;

            font-size: 26px;
            font-weight: 800;
        }
    </style>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>YXB</title>
    <link rel="styleSheet" href="" type="text/css">
</head>
<body>

<h1>YXB</h1>

<input type="button" value="show" onclick="show()" />
<ul id="ul1">
    <li>4</li>
    <li>3</li>
    <li>2</li>
    <li>1</li>
</ul>


</body>
<script type="text/javascript" src=""></script>

<script>


    function show(){
        var ul1=document.getElementById("ul1");
        //找出我们所有的li滴呀
        var lis=ul1.getElementsByTagName("li");
        //建立以新的数组滴呀
        var list=[];
        var liLen=lis.length;
        for(var i=0;i<liLen;i++){
            //这个就是我们添加的东西滴一
            list[i]=lis[i];
        }
        //对数组进行排序滴呀
        list.sort(function (li1,li2){
            var n1=parseInt(li1.innerHTML);
            var n2=parseInt(li2.innerHTML);
            return n1-n2; //这样来进行我们简单的比较滴呀
        })

        //然后我们再appendChild 就可以实现我们基本的操作滴啊
        for(var j=0;j<liLen;j++){
            ul1.appendChild(list[j]); //数组是已经排好序滴啦；
            //一些都是很简单的方法滴呀;
            //我要如何去做滴呀
        }
    }



</script>
</html>
